টেক্সটের জন্য ফন্ট ফ্যামিলি, গাঢ়ত্ব, সাইজ এবং স্টাইল নির্ধারণ করতে সিএসএস font প্রোপার্টি ব্যবহার করা হয়।
একটি ডিক্লেয়ারেশনের মাধ্যমে সবগুলো ফন্ট প্রোপার্টি সেট করার একটি শর্টহ্যান্ড প্রোপার্টি।
টেক্সটের ফন্ট সাইজ সেট করার জন্য ব্যবহার করা হয়।
টেক্সটের ফন্ট ফ্যামিলি সেট করার জন্য ব্যবহার করা হয়।
টেক্সটের ফন্ট স্টাইল সেট করার জন্য ব্যবহার করা হয়।
টেক্সটের ফন্টসমূহ small-caps আকারে দেখাবে কিনা তা নির্ধারণ করে।
ফন্টকে গাঢ় বা হালকাভাবে উপস্থাপন করে।
সিএসএসের মধ্যে দুই ধরনের ফন্ট ফ্যামিলি রয়েছেঃ
"Serif", "Monospace" ইত্যাদি।"Times New Roman", "Arial" ইত্যাদি।বিঃদ্রঃ কম্পিঊটারের স্ক্রিনে serif ফন্টের চেয়ে sans-serif ফন্ট খুব সহজে পড়া যায়
font-family প্রোপার্টির মাধ্যমে টেক্সটের ফন্ট ফ্যামিলি সেট করা হয়।
font-family প্রোপার্টিতে "fallback" সিস্টেম হিসাবে বিভিন্ন ফন্ট এর নাম রাখা উচিত। যদি কোন ব্রাউজারে প্রথম ফন্টটি সাপোর্ট না করে, তাহলে তা পরবর্তী ফন্টের জন্য চেষ্টা করে এবং এভাবে চলতে থাকে।
আপনার পছন্দ অনুযায়ী ফন্টের নাম দিয়ে শুরু করুন এবং generic family দ্বারা শেষ করুন। কারণ যদি অন্য কোন ফন্ট না কাজ করে তাহলে ব্রাউজার তার মত করে generic family'র মধ্য থেকে একই ধরণের ফন্ট বাছাই করে নিবে।
বিঃদ্রঃ যদি কোনো ফন্ট ফ্যামিলির নাম এক শব্দের চেয়ে বেশি হয় তাহলে এটাকে অবশ্যই কোটেশন মার্ক(" ") এর মধ্যে রাখতে হবে। যেমনঃ "Times New Roman"
একের অধিক ফন্ট ফ্যামিলি থাকলে কমা(,) দ্বারা সেগুলোকে আলাদা করতে হবেঃ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
p.paragraph1 {
font-family: "Times New Roman", Times, serif;
}
p.paragraph2 {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>CSS font familly</h1>
<p class="paragraph1">We sets "Times New Roman" font for this paragraph.</p>
<p class="paragraph2">We sets "Arial" font for this paragraph.</p>
</body>
</html>
সচরাচর ব্যবহৃত ফন্টসমূহ সম্বন্ধে জানতে আমাদের ওয়েব সেফ ফন্টের সমাহার পেজটি ভিজিট করুন।
অধিকাংশ ক্ষেত্রেই ফন্টসমূহকে হালকা বাঁকাভাবে(italic) উপস্থাপন করার জন্য font-style প্রোপার্টিটি ব্যবহার করা হয়।
এই প্রোপার্টিতে ৩টি ভ্যালু ব্যবহার করা যায়ঃ
normal - টেক্সটকে সাধারণভাবে দেখানো হয়।italic - টেক্সটকে ইটালিক স্টাইলে দেখানো হয়।oblique - এটি italic এর মত টেক্সটকে বাঁকা করে। কিনতু ইটালিকের তুলনায় ইহা কম সমর্থিত।
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<h1>font-style প্রোপার্টির ব্যবহার</h1>
<p class="normal">এই প্যারাগ্রাফটিতে নরমাল স্টাইল সেট করা হয়েছে।</p>
<p class="italic">এই প্যারাগ্রাফটিতে ইটালিক্ স্টাইল সেট করা হয়েছে।</p>
<p class="oblique">এই প্যারাগ্রাফটিতে oblique স্টাইল সেট করা হয়েছে।</p>
</body>
</html>
font-size প্রোপার্টি
টেক্সটের সাইজ নির্ধারণ করার জন্য font-size প্রোপার্টি ব্যবহার করা হয়।
ওয়েব ডিজাইনিং এর ক্ষেত্রে টেক্সটের আকার(size) নির্ধারণ করা খুবই গুরুত্বপূর্ণ। যাইহোক, font-size প্রোপার্টি ব্যবহার করে প্যারাগ্রাফকে হেডিং এর সাইজে অথবা হেডিং কে প্যারাগ্রাফের সাইজে করা মোটেও উচিত হবে না।
সবসময় প্রয়োজন অনুযায়ী উপযুক্ত এইচটিএমএল ট্যাগ ব্যবহার করা উচিত। যেমন- হেডিং এর জন্য <h1> থেকে <h6> ট্যাগ এবং প্যারাগ্রাফ এর জন্য <p> ট্যাগ ব্যবহার করা উচিত।
font-size প্রোপার্টির ভ্যালু absolute অথবা relative হতে পারে।
বিঃদ্রঃ আপনি যদি ফন্টের সাইজ না সেট করে দেন, তাহলে ব্রাউজার থেকে ডিফল্টভাবে সাইজ নিয়ে নিবে।
যেমন- প্যারাগ্রাফ এর জন্য ডিফল্ট সাইজ হলো 16px (16px = 1em)।
Px একক ব্যবহার করে আপনি আপনার ইচ্ছা মত টেক্সট এর আকার নির্ধারণ করতে পারেনঃ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
h4 {
font-size: 30px;
color: green;
}
p.first {
font-size: 20px;
}
p.last {
font-size: 10px;
}
</style>
</head>
<body>
<h4>font-size প্রোপার্টির মাধ্যমে এই শিরোনামটির টেক্সটের সাইজ 30px নির্ধারণ করা হয়েছে।</h4>
<p class="first">font-size প্রোপার্টির মাধ্যমে এই প্যারাগ্রাফটির টেক্সটের সাইজ 20px নির্ধারণ করা হয়েছে।</p>
<p class="last">font-size প্রোপার্টির মাধ্যমে এই প্যারাগ্রাফটির টেক্সটের সাইজ 10px নির্ধারণ করা হয়েছে।</p>
</body>
</html>একজন ইউজারকে ব্রাউজার মেনু থেকে টেক্সট রিসাইজ(resize) করতে দেওয়ার জন্য অনেক ডেভেলপারই px এর পরিবর্তে em একক ব্যবহার করেন।
ফন্টের সাইজ নির্ধারণে em একক W3C সমর্থিত।
একটি ব্রাউজারের চলমান ফন্ট সাইজ হলো 1em এর সমান এবং ব্রাউজারের ডিফল্ট টেক্সট সাইজ হল 16px। সুতরাং 1em এর ডিফল্ট সাইজ = 16px।
পিক্সেলকে em এ কনভার্টের জন্য pixels/16 =em ফর্মূলা ব্যবহার করা হয়।
ফন্ট গাঢ় বা হালকা করার জন্য font-weight প্রোপার্টি ব্যবহার করা হয়ঃ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
h4 {
font-size: 2em;
color: green;
}
p.first {
font-size: 1.5em;
}
p.last {
font-size: .875em;
}
</style>
</head>
<body>
<h4>font-size প্রোপার্টির মাধ্যমে এই শিরোনামটির টেক্সটের সাইজ 2em নির্ধারণ করা হয়েছে।</h4>
<p class="first">font-size প্রোপার্টির মাধ্যমে এই প্যারাগ্রাফটির টেক্সটের সাইজ 1.5em নির্ধারণ করা হয়েছে।</p>
<p class="last">font-size প্রোপার্টির মাধ্যমে এই প্যারাগ্রাফটির টেক্সটের সাইজ .875em নির্ধারণ করা হয়েছে।</p>
</body>
</html>টেক্সটের ফন্টসমূহ small-caps আকারে দেখাবে কিনা font-variant প্রোপার্টির মাধ্যমে তা নির্ধারণ করা হয়।
small-caps ফন্টে সকল ছোট অক্ষরের বর্ণ গুলো বড় অক্ষরের বর্ণে রুপান্তরিত হয়। রুপান্তরিত বড় অক্ষরের বর্ণগুলো প্রকৃত সাইজের চেয়ে ছোট হয়ে বড় অক্ষর হিসাবে ব্রাউজারে প্রদর্শিত হয়।
<!DOCTYPE html>
<html>
<head>;
<title>সিএসএস উদাহরণ</title>
<style>
p.normal {
font-weight: normal;
}
p.lighter {
font-weight: lighter;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 900;
}
</style>
</head>
<body>
<h2>font-weight প্রোপার্টির ব্যবহার</h2>
<p class="normal">font-weight(normal) প্রোপার্টির ব্যবহার</p>
<p class="lighter">font-weight(lighter) প্রোপার্টির ব্যবহার</p>
<p class="thick">font-weight(thick) প্রোপার্টির ব্যবহার</p>
<p class="thicker">font-weight(thicker) প্রোপার্টির ব্যবহার</p>
</body>
</html>
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
